<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

	<style>

		body{
            perspective: 300px;
        }

        #box{
            width: 100px;
            height: 100px;
            margin: 100px auto 0px;
            position: relative;
            transform-style: preserve-3d;
            transform-origin: center center -50px;
            transition: 1s;
        }

        .box1{
            width: 100px;
            height: 100px;
            background: url(img/公交.png) no-repeat;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .box2{
            width: 100px;
            height: 100px;
            background: url(img/优惠券.png) no-repeat;
            position: absolute;
            top: 0px;
            left: 0px;
            transform-origin: left;
            transform: rotateY(90deg);
        }

        .box3{
            width: 100px;
            height: 100px;
            background: url(img/投票.png) no-repeat;
            position: absolute;
            top: 0px;
            left: 0px;
            transform-origin: right;
            transform: rotateY(-90deg);
        }

        .box4{
            width: 100px;
            height: 100px;
            background: url(img/网络电台.png) no-repeat;
            position: absolute;
            top: 0px;
            left: 0px;
            transform: translateZ(-100px);
        }

        #input_box{
            width: 50px;
            margin: 20px auto 0px;
            overflow: hidden;
            background: red;
        }
        
        .temp{
            width: 100%;
            float: left;
            background: yellow;
            display: none;
        }

        .temp_btn{
            width: 100%;
            text-align: center;
            background: pink;
        }

        span{
            font: 16px/40px "simsun";
        }

        input{
            float: left;
        }


    </style>
</head>
<body>
    写一个图片切换，两边都有的。
    写一个显示隐藏
    <br>
    <br>
    <div id="input_box" onmouseover="over()" onmouseout="out()">
        <div class="temp_btn">
            <span>菜单</span>
        </div>
        <div class="temp">
            <input type="button" onclick="demo(this.value)" value="上一张">
            <input type="button" onclick="demo(this.value)" value="下一张">
        </div>
    </div>
    <div id="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>

<script>
    function demo(value){
        var box = document.getElementById('box');
        var deg = box.style.transform;
        var i;
        if (deg == '') {
            i = 0;
        }else{
            i = parseInt(deg.substr(8));
        }
        if (value == '下一张') {
            i -= 90;
        }else if (value == '上一张') {
            i += 90;
        }
        box.style.transform = 'rotateY(' + i + 'deg)';
    }

    function over(){
        var input_box = document.getElementsByClassName('temp')[0];
        input_box.style.display = 'block';
    }

    function out(){
        var input_box = document.getElementsByClassName('temp')[0];
        input_box.style.display = 'none';
    }


</script>


